Vite 开始

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Getting Started: https://vitejs.dev/guide/
github: https://github.com/vitejs/vite/

2021.3.8 星期一 15：36

vite —— 一种新的、更快地 web 开发工具

介绍

Vite 的核心功能：Static Server + Compile + HMR

它具有以下特点：
快速的冷启动
即时的热模块更新
真正的按需编译

vite功能实现提供 web server：
借用了 koa 来启动服务
模块解析：核心是拦截浏览器对模块的请求
支持 /@module/ ：判断路径是否以 /@module/ 开头，如果是取出包名，去 node_module 里找到这个库，基于 package.json 返回对应的内容
文件编译：拦截了对模块的请求并执行实时编译

原理

vite的任务，就是用koa起一个http 服务，来拦截这些请求，返回合适的结果，就欧克了，下面我们一步步来，为了方便演示，代码简单粗暴

支持html和js
第三方库

不是合法的相对路径，浏览器报错
支持/@module/
.vue组件
单文件组件解析
我们直接用vue官方的@vue/compiler-sfc来整单文件
模板解析
支持css

总结

就是通过拦截import的http请求，来实现无需打包，自带按需加载的工具
热更新怎么做的，其实核心逻辑就是注入http://socket.io

webpack对比

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。

由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，

因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS